
<template>
    <div class="common_page">
        <div class="main_content" ref="mainContent">
            <div class="main_content_top">
                <div v-for="(item, index) in topData" :key="index" class="main_content_top_box">
                    <div class="top_box_head">{{ item.name }}</div>
                    <div class="top_box_content" :class="item.id == 6 ? 'top_box_red' : item.id == 7 ? 'top_box_green' : ''">
                        <el-image v-if="item.img" style="width: 31px; height: 30px" :src="item.img" fit="fill"></el-image>
                        <div class="top_box_content_num">{{ item.num }}</div>
                        <div class="top_box_content_unit">{{ item.unit }}</div>
                    </div>
                </div>
            </div>
            <el-card class="main-card" shadow="never">
                <el-form :model="searchData" ref="queryForm" :inline="true" label-width="68px" style="margin-bottom: -20px">
                    <el-form-item label="订单编号" prop="number">
                        <el-input placeholder="请输入内容" v-model="searchData.number"></el-input>
                    </el-form-item>
                    <el-form-item label="厂区" prop="plantId">
                        <!-- <el-input
                  placeholder="请输入内容"
                  v-model="searchData.plantName">
                </el-input> -->
                        <el-select v-model="searchData.plantId" clearable placeholder="请选择" @change="plantChange">
                            <el-option v-for="item in factoryAreaList" :key="item.id" :label="item.plantName" :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="状态" prop="state">
                        <el-select v-model="searchData.state" clearable placeholder="请选择">
                            <el-option v-for="item in buildList" :key="item.buildId" :label="item.buildName" :value="item.buildId" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="" prop="templateNumber">
                        <el-button v-hasPermi="['productManage:orderManage:query']" type="primary" icon="el-icon-search" size="mini" @click="search">搜索</el-button>
                    </el-form-item>
                </el-form>
                <div class="card-toolbar mb8 flex-between" style="margin-top: 20px; width: 100%">
                    <el-button v-hasPermi="['productManage:orderManage:add']" type="primary" icon="el-icon-plus" size="mini" @click="addNew">新增</el-button>
                    <div>
                        <el-tooltip class="item" effect="dark" content="重置" placement="top">
                            <el-button size="mini" circle icon="el-icon-refresh" v-hasPermi="['productManage:orderManage:query']" @click="resetFields" />
                        </el-tooltip>
                    </div>
                </div>

                <div class="page_content" style="width: 100%">
                    <div class="page_content_bottom">
                        <sysTable
                            :data="setTableData"
                            :columns="setTableColumns"
                            :curr-page="searchData.currPage"
                            :total-page="pageTotal"
                            :page-size="searchData.pageSize"
                            @sizeChange="sizeChange"
                            @currentChange="currentChange"
                        >
                            <template #type="scope">
                                <div :class="jumpClass(scope.scope.row.type)">{{ jumpState(scope.scope.row.type) }}</div>
                            </template>
                            <template #rateOfProgress="scope">
                                <el-progress :text-inside="true" color="#91c7fd" :stroke-width="28" text-color="#7f7f7f" :percentage="scope.scope.row.rateOfProgress"></el-progress>
                            </template>
                            <template #operation="scope">
                                <el-button v-hasPermi="['productManage:orderManage:edit']" size="small" type="primary" plain style="padding: 5px" icon="el-icon-edit" @click="editDialog(scope.scope.row)">编辑</el-button>
                                <el-button v-hasPermi="['productManage:orderManage:detail']" size="small" type="primary" plain style="padding: 5px" icon="el-icon-view" @click="showDetail(scope.scope.row)">
                                    详情
                                </el-button>
                                <el-button v-hasPermi="['productManage:orderManage:remove']" size="small" type="danger" plain style="padding: 5px" icon="el-icon-delete" @click="delOne(scope.scope.row)">删除</el-button>
                            </template>
                        </sysTable>
                    </div>
                </div>
            </el-card>
            <el-dialog :title="addOrEditTitles" :visible.sync="addOrEditDialog" width="748px" @close="cancel" append-to-body>
                <el-form ref="form" :model="formData" label-width="100px">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="订单公司:" prop="name">
                                <el-input v-model="formData.name" :disabled="addOrEditTitles == '详情'" placeholder="请输入内容" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="订单编号:" prop="number">
                                <el-input v-model="formData.number" :disabled="addOrEditTitles == '详情'" placeholder="请输入内容" style="width: 220px" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="订单金额:" prop="orderAmount">
                                <el-input v-model="formData.orderAmount" type="number" :disabled="addOrEditTitles == '详情'" placeholder="请输入内容" style="width: 220px" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="厂区:" prop="plantId">
                                <el-select v-model="formData.plantId" :disabled="addOrEditTitles == '详情'" clearablestyle="width:220px;" placeholder="请选择">
                                    <el-option v-for="item in factoryAreaList" :key="item.id" :label="item.plantName" :value="item.id" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="预计开始时间:" prop="beginDate">
                                <el-date-picker
                                    v-model="formData.beginDate"
                                    type="datetime"
                                    placeholder="选择日期"
                                    format="yyyy-MM-dd HH:mm"
                                    value-format="yyyy-MM-dd HH:mm"
                                    style="width: 220px"
                                    :disabled="addOrEditTitles == '详情'"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="预计结束时间:" prop="endDate">
                                <el-date-picker
                                    v-model="formData.endDate"
                                    type="datetime"
                                    placeholder="选择日期"
                                    format="yyyy-MM-dd HH:mm"
                                    value-format="yyyy-MM-dd HH:mm"
                                    style="width: 220px"
                                    :disabled="addOrEditTitles == '详情'"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-if="addOrEditTitles == '编辑'">
                        <el-col :span="24">
                            <el-form-item label="生产状态:" prop="type">
                                <el-radio-group v-model="formData.type">
                                    <el-radio :label="1">待生产</el-radio>
                                    <el-radio :label="2">生产中</el-radio>
                                    <el-radio :label="3">已完成</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancel">取 消</el-button>
                    <el-button type="primary" @click="submitForm">提 交</el-button>
                </div>
            </el-dialog>
            <!-- <el-dialog :title="addOrEditTitles" :visible.sync="addOrEditDialog" width="1140px" append-to-body>
          <div class="add_dialog_top">
            <el-form ref="form" :model="formData" label-width="100px">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="订单公司:" prop="purchaseNumber">
                      <el-input v-model="formData.purchaseNumber" size="small" placeholder="请输入内容" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="订单编号:" prop="unit">
                      <el-input v-model="formData.unit" size="small" placeholder="请输入内容" style="width:220px;" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="订单金额:" prop="countPrice">
                      <el-input v-model="formData.countPrice" size="small" placeholder="请输入内容" style="width:220px;" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="产区:" prop="price">
                      <el-input v-model="formData.price" size="small" placeholder="请输入内容" style="width:220px;" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="预计开始时间:" prop="purchaseDate">
                      <el-input v-model="formData.price" size="small"  placeholder="请输入内容" style="width:220px;" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="预计结束时间:" prop="supplierName">
                      <el-input v-model="formData.supplierName" size="small" placeholder="请输入内容" style="width:220px;" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="生产状态:" prop="price">
                      <el-input v-model="formData.price" size="small" placeholder="请输入内容" style="width:220px;" />
                    </el-form-item>
                  </el-col>
                </el-row>
            </el-form>
          </div>
          <div class="add_dialog_bottomTitle">生产批次</div>
          <div class="add_dialog_bottom" v-for="(item, index) in productBatchList" :key="index" :class="item.showMore? '' : 'add_dialog_bottom_top_expansion'">
            <div class="add_dialog_bottom_top" >
              <div>生产批次-1</div>
              <div class="add_dialog_bottom_operation">
                <el-image v-if="item.showMore" @click="changeStatus(item)" style="width:20px;height: 20px;" :src="require('@/assets/images/orderDown.png')"></el-image>
                <el-image v-else @click="changeStatus(item)" style="width:20px;height: 20px;" :src="require('@/assets/images/orderOn.png')"></el-image>
                <el-image style="width:20px;height: 20px;margin-left: 10px;" :src="require('@/assets/images/orderDel.png')"></el-image>
              </div>
            </div>
            <div class="add_dialog_bottom_bottom">
              <el-form ref="form" :model="formData" label-width="100px">
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="批次编号:" prop="unit">
                        <el-input v-model="formData.unit" size="small" placeholder="请输入内容" style="width:220px;" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="批次名称:" prop="countPrice">
                        <el-input v-model="formData.countPrice" size="small" placeholder="请输入内容" style="width:220px;" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="工厂:" prop="price">
                        <el-input v-model="formData.price" size="small" placeholder="请输入内容" style="width:220px;" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="开始时间:" prop="purchaseDate">
                        <el-input v-model="formData.price" size="small" placeholder="请输入内容" style="width:220px;" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="结束时间:" prop="supplierName">
                        <el-input v-model="formData.supplierName" size="small" placeholder="请输入内容" style="width:220px;" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="区域:" prop="price">
                        <el-input v-model="formData.price" size="small" placeholder="请输入内容" style="width:220px;" />
                      </el-form-item>
                    </el-col>
                  </el-row>
              </el-form>
            </div>
          </div>
          <div class="add_dialog_addBtn">
            <el-image style="width:20px;height: 20px;margin: 0 10px 0 16px;" :src="require('@/assets/images/addOrder.png')"></el-image>
            <div>继续添加生产批次</div>
          </div>
          <div slot="footer" class="dialog-footer">
              <el-button @click="cancel">取 消</el-button>
              <el-button type="primary" @click="submitForm">提 交</el-button>
          </div>
      </el-dialog> -->
        </div>
    </div>
</template>

<script>
import { getOrderList, addOrder, updateOrder, deleteOrder, getBatchByOrder, getOrderTop, getFactoryAreaList } from '../api/product/index';
import sysTable from '../components/SysTable';
export default {
    name: 'equipmentEnergy',
    components: {
        sysTable,
    },
    data() {
        return {
            searchData: {
                number: '',
                plantName: '',
                state: '',
                pageSize: 10,
                currPage: 1,
            },
            setTableData: [],
            pageTotal: 0,
            plantList: [],
            buildList: [
                {
                    buildName: '待处理',
                    buildId: 1,
                },
                {
                    buildName: '生产中',
                    buildId: 2,
                },
                {
                    buildName: '已完成',
                    buildId: 3,
                },
            ],
            factoryAreaList: [],
            setTableColumns: [
                {
                    label: '订单编号',
                    prop: 'number',
                    minWidth: '180',
                    align: 'center',
                    fixed: 'left',
                    showOverflowTooltip: true,
                },
                {
                    label: '订单公司',
                    prop: 'name',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '预计开始时间',
                    prop: 'beginDate',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '预计结束时间',
                    prop: 'endDate',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '预计用时',
                    prop: 'timeConsuming',
                    width: '120',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '实际结束',
                    prop: 'factEndDate',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '实际用时',
                    prop: 'timeFact',
                    width: '120',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '厂区',
                    prop: 'plantName',
                    width: '120',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '订单金额(元)',
                    prop: 'orderAmount',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '状态',
                    prop: 'type',
                    width: '150',
                    align: 'center',
                    showOverflowTooltip: true,
                },

                {
                    label: '进度',
                    prop: 'rateOfProgress',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '操作',
                    prop: 'operation',
                    minWidth: '220',
                    fixed: 'right',
                    align: 'center',
                },
            ],
            topData: [
                {
                    name: '已完成订单总数',
                    id: 1,
                    unit: '个',
                    num: '2240',
                    img: '',
                },
                {
                    name: '待处理订单数量',
                    id: 2,
                    unit: '个',
                    num: '8',
                    img: '',
                },
                {
                    name: '处理中订单数量',
                    id: 3,
                    unit: '个',
                    num: '4',
                    img: '',
                },
                {
                    name: '订单完成率',
                    id: 4,
                    unit: '%',
                    num: '98',
                    img: '',
                },
                {
                    name: '平均用时',
                    id: 5,
                    unit: '小时',
                    num: '28',
                    img: '',
                },
                {
                    name: '上月同比',
                    id: 6,
                    unit: '%',
                    num: '124',
                    img: require('../images/upward.png'),
                },
                {
                    name: '上月环比',
                    id: 7,
                    unit: '%',
                    num: '24',
                    img: require('../images/down.png'),
                },
            ],
            buttonLoading: false,
            addOrEditTitles: '新增',
            formData: {
                name: '',
                number: '',
                orderAmount: '',
                plantId: '',
                beginDate: '',
                endDate: '',
                type: 1,
            },
            addOrEditDialog: false,
            productBatchList: [
                {
                    showMore: false,
                },
            ],
        };
    },
    mounted() {
        this.getPageList();
        this.getPageTop();
        this.getFactoryAreaList();
    },
    methods: {
        search() {
            this.buttonLoading = true;
            this.getPageList();
        },
        resetFields() {
            this.searchData = {
                number: '',
                plantName: '',
                state: '',
                pageSize: 10,
                currPage: 1,
            };
            this.search();
        },
        sizeChange(val) {
            this.searchData.pageSize = val;
            this.getPageList();
        },
        currentChange(val) {
            this.searchData.currPage = val;
            this.getPageList();
        },
        getPageList() {
            getOrderList(this.searchData)
                .then((res) => {
                    console.log('11122');
                    if (res.code == 200) {
                        this.setTableData = res.data.list;
                        this.pageTotal = res.data.total;
                    } else {
                        this.$message.error('列表数据请求失败，请联系管理员');
                        this.setTableData = [];
                        this.pageTotal = 0;
                    }
                    this.buttonLoading = false;
                })
                .finally(() => {
                    this.buttonLoading = false;
                });
        },
        getPageTop() {
            getOrderTop().then((res) => {
                console.log(res, '头部数据');
                if (res.code == 200) {
                    this.topData[0].num = res.data.finished;
                    this.topData[1].num = res.data.pending;
                    this.topData[2].num = res.data.progress;
                    this.topData[3].num = res.data.percentage;
                    this.topData[4].num = res.data.hour;
                    this.topData[5].num = res.data.year;
                    this.topData[6].num = res.data.chain;
                } else {
                    this.$message({
                        type: 'error',
                        message: '接口请求失败，请联系管理员',
                    });
                }
            });
        },
        getFactoryAreaList() {
            getFactoryAreaList().then((res) => {
                console.log(res, '厂区列表');
                if (res.code == 200) {
                    this.factoryAreaList = res.data || [];
                } else {
                    this.factoryAreaList = [];
                    this.$message.error('厂区列表请求失败，请联系管理员');
                }
            });
        },
        // handleExport() {
        //   this.buttonLoading = true
        //   var datas = {
        //     number: this.searchData.number,
        //     plantName: this.searchData.plantName,
        //     workshopName: this.searchData.workshopName,
        //     state: this.searchData.state,
        //     pageSize: '',
        //     currPage: ''
        //   }
        //   const obj = JSON.parse(JSON.stringify(datas))
        //   this.download('energy/monitoring/buildingByReport', {
        //             ...obj
        //         }, '订单管理记录.xlsx')
        //   this.buttonLoading = false
        //   // exportBuild(obj).then(res=> {
        //   //   const fileName = '设备能源监控记录.xlsx'
        //   //   saveExcel(res.data, fileName)
        //   // })
        // },
        delOne(val) {
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    const obj = {
                        id: val.id,
                    };
                    deleteOrder(obj).then((res) => {
                        console.log(res, '333');
                        if (res.code == 200) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!',
                            });
                            this.searchData.currPage = 1;
                            this.getPageList();
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.msg,
                            });
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    });
                });
        },
        addNew() {
            this.addOrEditTitles = '新增';
            this.addOrEditDialog = true;
        },
        editDialog(val) {
            this.formData = JSON.parse(JSON.stringify(val));
            this.addOrEditTitles = '编辑';
            this.addOrEditDialog = true;
        },
        showDetail(val) {
            this.formData = val;
            this.addOrEditTitles = '详情';
            this.addOrEditDialog = true;
        },
        submitForm() {
            if (this.addOrEditTitles == '新增') {
                addOrder(this.formData).then((res) => {
                    if (res.code == 200) {
                        this.searchData.currPage = 1;
                        this.getPageList();
                        this.cancel();
                    } else {
                        this.$message.error('新增失败，请联系管理员');
                    }
                });
            } else {
                updateOrder(this.formData).then((res) => {
                    if (res.code == 200) {
                        this.searchData.currPage = 1;
                        this.getPageList();
                        this.cancel();
                    } else {
                        this.$message.error('编辑失败，请联系管理员');
                    }
                });
            }
        },
        cancel() {
            this.formData = {
                name: '',
                number: '',
                orderAmount: '',
                plantId: '',
                beginDate: '',
                endDate: '',
                type: 1,
            };
            this.addOrEditDialog = false;
        },
        changeStatus(item) {
            item.showMore = !item.showMore;
        },
        jumpState(val) {
            switch (val) {
                case 1:
                    return '待处理';
                case 2:
                    return '生产中';
                case 3:
                    return '已完成';
                default:
                    return '-';
            }
        },
        jumpClass(val) {
            switch (val) {
                case 1:
                    return 'waits';
                case 2:
                    return 'processs';
                case 3:
                    return 'completes';
                default:
                    return '-';
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.common_page {
    height: 100%;
    width: 100%;

    background: #f3f4f5;
    overflow: auto;
}
.main_content {
    padding: 16px 20px;
}
::v-deep.el-card {
    border-radius: 8px;
}
.page_content {
    background: #fff;
    padding-bottom: 30px;
    box-sizing: border-box;
    padding: 20px 20px 30px 20px;
    border-radius: 8px;
    .page_content_head {
        display: flex;
    }
}
.main_content_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    .main_content_top_box {
        width: 13%;
        margin-right: 1.5%;
        height: 104px;
        background: #fff;
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.02), 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
        border-radius: 8px 8px 8px 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .top_box_head {
            color: #666;
            font-size: 14px;
            line-height: 20px;
            margin-bottom: 4px;
        }
        .top_box_content {
            color: #333;
            font-size: 14px;
            // line-height: 30px;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            .top_box_content_num {
                font-size: 26px;
                font-weight: bold;
                line-height: 30px;
            }
            .top_box_content_unit {
                line-height: 22px;
            }
        }
        .top_box_red {
            color: #ff4c4d;
        }
        .top_box_green {
            color: #00b24a;
        }
    }
    .main_content_top_box:last-of-type {
        margin-right: 0px;
    }
}
::v-deep.sys_table {
    .tableHeaderRow {
        cursor: pointer;
        .tableHeaderCell:active {
            opacity: 0.6;
        }
        .tableHeaderCell:last-of-type:active {
            opacity: 1;
        }
        .tableHeaderCell:first-of-type:active {
            opacity: 1;
        }
        .tableHeaderCell:last-of-type {
            cursor: default;
        }
        .tableHeaderCell:first-of-type {
            cursor: default;
        }
    }
}
.ope_btn {
    width: 44px;
    height: 28px;
    line-height: 28px;
    color: #3399ff;
    font-size: 14px;
    background: #ffffff;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid rgba(0, 85, 255, 0.5);
    padding: 0px;
}
.del_btn {
    width: 44px;
    height: 28px;
    background: #ffffff;
    line-height: 28px;
    color: #ff4c4d;
    font-size: 14px;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid rgba(255, 76, 77, 0.5);
    padding: 0px;
}
::v-deep.el-form {
    .el-form-item {
        .el-form-item__label {
            // text-align: left;
            color: #666;
            font-size: 14px;
            font-weight: 400;
        }
    }
}
::v-deep .el-dialog {
    .el-dialog__body {
        padding: 24px;
    }
}
.add_dialog_top {
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    padding: 16px;
}
.add_dialog_bottomTitle {
    color: #4a4a4a;
    font-size: 16px;
    line-height: 24px;
    margin: 20px 0;
    font-weight: 500;
}
.add_dialog_addBtn {
    height: 52px;
    background: rgba(51, 153, 255, 0.1);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 20px;
}
.add_dialog_bottom {
    box-sizing: border-box;
    padding: 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #f7f8f9;
    margin-bottom: 10px;
    height: 52px;
    box-sizing: border-box;
    overflow: hidden;
    .add_dialog_bottom_top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
    }
}
.add_dialog_bottom_top_expansion {
    height: unset;
    box-sizing: border-box;
    overflow: visible;
    .add_dialog_bottom_top {
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        padding-bottom: 12px;
    }
}
.add_dialog_bottom_bottom {
    ::v-deep.el-form {
        .el-form-item {
            margin-bottom: 10px;
        }
        .el-form-item:nth-of-type(4) {
            margin-bottom: 0px;
        }
        .el-form-item:nth-of-type(5) {
            margin-bottom: 0px;
        }
        .el-form-item:nth-of-type(6) {
            margin-bottom: 0px;
        }
    }
}

.processs {
    width: 58px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: rgba(255, 119, 51, 0.1);
    border-radius: 4px 4px 4px 4px;
    color: #ff7733;
    font-size: 14px;
    margin: 0 auto;
}

.waits {
    width: 58px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: rgba(51, 153, 255, 0.1);
    border-radius: 4px 4px 4px 4px;
    color: #3399ff;
    font-size: 14px;
    margin: 0 auto;
}

.completes {
    width: 58px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: rgba(0, 178, 74, 0.1);
    border-radius: 4px 4px 4px 4px;
    color: #00b24a;
    font-size: 14px;
    margin: 0 auto;
}
</style>
